<#include "common/main.html">
<#macro bodyId>common-edit</#macro>
<#macro content>

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main ty-common-page">
    <h1 class="page-header">广告详情
        <div class="btns">
            <a class="btn btn-primary" href="/advertise/list">返回广告列表</a>
        </div>
    </h1>

    <form class="form-horizontal ac-form" role="form">
		<input type="hidden" class="form-control ac-form-item" name="id" value="${advertise.id}" readonly required/>

		<div class="form-group">
			<label class="col-sm-2 control-label">标题</label>
			<div class="col-sm-3">
				<input class="form-control ac-form-item"  name="title" value="${advertise.title}" />
			</div>
			<label class="col-sm-2 control-label">广告按钮文字：</label>
            <div class="col-sm-3">
                <input class="form-control ac-form-item" name="buttonText" value="${advertise.buttonText}" />
            </div>
	    </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">权重</label>
            <div class="col-sm-3">
                <input class="form-control ac-form-item" name="weight" value="${advertise.weight}" />
			</div>

            <label class="col-sm-2 control-label required">广告状态：</label>
            <div class="col-sm-3">
               <select class="form-control ac-form-item" name="status" required>
                   <option value="1" <#if advertise.status=='1'>selected="true"</#if>>启用</option>
                   <option value="0" <#if advertise.status=='0'>selected="true"</#if>>禁用</option>
               </select>
            </div>

        </div>
        
        <div class="form-group">
            <label class="col-sm-2 control-label">广告按钮链接：</label>
            <div class="col-sm-3">
				<input class="form-control ac-form-item" style="width:600px"  name="buttonUrl" value="${advertise.buttonUrl}" />
            </div>
        </div>

		<div class="form-group">
			<label class="col-sm-2 control-label required">广告图片：</label>
			<div class="col-sm-6">
				<input class="form-control ac-form-item" name="imgUrl" value="${advertise.imgUrl}" id="input-id2" required>
			</div>
			<div class="col-sm-2">
				<button id="btn-id2" class="btn btn-default" type="button">请上传图片</button>
			</div>
			<div class="col-sm-4 col-sm-offset-2" style="margin-top: 15px;">
				<image class="upload-img" <#if advertise.imgUrl != null && advertise.imgUrl != ''>src="${advertise.imgUrl}"</#if> id="upload-img2"  width="180"  />
		</div>
		<div class="col-sm-4" style="margin-top: 15px;">
			<ul class="pic-list">
				<li>
					<div class="progress">
						<div class="progress-bar" style="width: 0%;" id="progress-bar2">0%</div>
					</div>
				</li>
			</ul>
		</div>
		</div>

		<div class="form-group">
			<label class="col-sm-2 control-label">备注</label>
			<div class="col-sm-8">
				<input class="form-control ac-form-item" style="width:600px" name="remark" value="${advertise.remark}" />
			</div>
	   </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-8">
                <button type="submit" class="btn btn-success ">保存</button>
            </div>
        </div>
    </form>

</div>

<script>
    var config = {
    	    swf: '${rc.contextPath}/static/lib/uploadify/uploadify.swf',
    	    save: '/advertise/createOrUpdate',
    	    uploadApi:'${rc.contextPath}/image/upload',
    	    successRedirectApi:'${rc.contextPath}/advertise/list'
    }
</script>

</#macro>


<script>

// 在服务器 使用 name="file" 来接受文件
crearteUploader("input-id1", 'btn-id1', 'upload-img1', 'progress-bar1');
crearteUploader("input-id2", 'btn-id2', 'upload-img2', 'progress-bar2');
crearteUploader("input-id3", 'btn-id3', 'upload-img3', 'progress-bar3');

// inputId: 关联input的id; btnId; imgClass; progressClass
function crearteUploader(inputId, btnId, imgClass, progressClass) {
	
	var uploadOpt = {
		runtimes : 'html5,flash,silverlight,html4',
		browse_button : btnId, // you can pass an id...
		//container: document.getElementById('container'), // ... or DOM Element itself
		url : '/image/upload',
		auto: true,
		flash_swf_url : '/static/lib/plupload/js/Moxie.swf',
		silverlight_xap_url : '/static/lib/plupload/js/Moxie.xap',
		
		filters : {
			max_file_size : '10mb',
			mime_types: [
				{title : "Image files", extensions : "jpg,gif,png,jpeg"},
				{title : "Zip files", extensions : "zip"}
			]
		},

		init: {
			PostInit: function() {
			},

			FilesAdded: function(up, files) {
				plupload.each(files, function(file) {
					var img = $('#' + imgClass)[0];
					
					if(URL && URL.createObjectURL){
						img.src = URL.createObjectURL(file.getNative());
					}else if(FileReader) {
						var fileRead = new FileReader();

						fileRead.onload = function() {
							img.src = fileRead.result;
						};

						fileRead.readAsDataURL(file.getNative());
					}
				});
				up.start();
			},

			UploadProgress: function(up, file) {
				var per = file.percent + "%";
				var perEle = $("#" + progressClass)[0];
				perEle.innerHTML = per;
				perEle.style.width = per;
			},

	        FileUploaded: function(up, file, info) {
				// Called when file has finished uploading
				// 检查
				var d = JSON.parse(info.response);
				if(d.code == 200) {
					// 成功
					$("#" + inputId)[0].value = d.data.fileUrl;
				} else {
					// 失败
				}
				
	        },


			Error: function(up, err) {
				//document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
			}
		}
	};
	
	var uploader = new plupload.Uploader(uploadOpt);

	uploader.init();
	
}

</script>